{% extends 'layout.html' %}
{% block title %}换电照片{% endblock %}
{% block content %}
<div class="row">
    <div class="col" align="center">
        <a href="/station/{{station.station_id}}"><h2>{{station.station_name}}</h2></a>
    </div>
</div>
<div class="row">
    <div class="col-6">换电站编号：{{ swap_record.stationNo }}</div>
    <div class="col-6">车牌号码：{{ swap_record.plateNo }}</div>
    <div class="col-6">车辆vin码：{{ swap_record.vin }}</div>
    <div class="col-6">车辆rfid编号：{{ swap_record.rfidCode }}</div>
    <div class="col-6">亏电电池编号：{{ swap_record.oldBatID }}</div>
    <div class="col-6">亏电电池soc：{{ swap_record.oldBatSoc }}%</div>
    <div class="col-6">满电电池编号：{{ swap_record.newBatID }}</div>
    <div class="col-6">满电电池soc：{{ swap_record.newBatSoc }}%</div>
    <div class="col-6">换电开始时间：{{ swap_record.startTime|date:"Y-m-d H:i:s" }}</div>
    <div class="col-6">换电完成时间：{{ swap_record.stopTime|date:"Y-m-d H:i:s" }}</div>
</div>
<div class="row">
    {% if swap_photos %}
    {% for photo in swap_photos %}
        <div class="col-6">
            <div class="panel panel-primary">
                <div class="panel-heading" align="center">
                    <center class="panel-title">
                        {{ photo.channel_name }} {{ photo.photo_time|date:"Y-m-d H:i:s"}}
                    </center>
                </div>
                <div class="panel-body">
                    <img src="{{ photo.photo_url }}" class="img-fluid" alt="{{ photo.channel_name }}">
                </div>
            </div>
        </div>
    {% endfor %}
    {% else %}
    <div class="col">
        <div class="alert alert-danger" role="alert">未抓拍到换电过程中的照片!</div>
    </div>
    {% endif %}
</div>
{% endblock %}